<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>网络布局</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      .grid-container {
        display: grid;
        /* grid-template-columns: auto auto; */
        /* grid-template-columns: auto auto; */
        grid-template-columns: 1fr 1fr 1fr;
        grid-column-gap: 50px;
        grid-row-gap: 30px;
        /* grid-gap: 50px; */
        /* grid-template-rows: 100px 200px 300px; */
        grid-template-rows: 120px;
        background-color: #2196f3;
        padding: 10px;
      }

      .grid-item {
        background-color: rgba(255, 255, 255, 0.8);
        border: 1px solid rgba(0, 0, 0, 0.8);
        padding: 30px;
        font-size: 30px;
        text-align: center;
      }

      .grid-item:nth-child(1) {
        /* 合并第一、二列 */
        grid-column: 1 / span 2;
        /* 占第一行 */
        grid-row: 1;
      }

      .grid-item:nth-child(2) {
        /* 第三列 */
        grid-column: 3;
        /* 合并第一、二行 */
        grid-row: 1 / span 2;
      }

      .grid-item:nth-child(5) {
        /* 合并第一、二和三列 */
        grid-column: 1 / span 3;
        /* 占第三行 */
        grid-row: 3;
      }
    </style>
  </head>
  <body>
    <!-- 
        使用 display: grid; 来设置网格容器的块级元素。
        通过 grid-template-columns 和 grid-template-rows 属性来定义网格中的行和列。
        grid-template-columns: auto; 后面加几个outo就有几列
        轨道可以使用任何长度单位进行定义。
        网格引入了 fr 单位来帮助我们创建灵活的网格轨道。一个 fr 单位代表网格容器中可用空间的一等份。
        grid-template-rows 属性在网格容器中设置行的高度:父盒子里面有几行就设置几个参数,若设置的参数少于行数，则多余的行的高度以第一个参数为准。
                若其后面只有一个参数则行的高度全为这个参数值
        grid-column-gap 属性来设置列之间的网格间距：
        grid-row-gap 属性来设置行之间的网格间距：
        grid-gap 属性可以同时设置行间距和列间距:
        grid-column 属性定义了网格元素列的开始和结束位置。
        注意： grid-column 是 grid-column-start 和 grid-column-end 属性的简写属性。
        我们可以参考行号来设置网格元素，也可以使用关键字 "span" 来定义元素将跨越的列数。
        grid-row 属性定义了网格元素行的开始和结束位置。
        注意： grid-row 是 grid-row-start 和 grid-row-end 属性的简写属性。
        我们可以参考行号来设置网格元素，也可以使用关键字 "span" 来定义元素将跨越的行数。
        grid-area 属性是 grid-row-start, grid-column-start, grid-row-end 以及 grid-column-end 属性的简写。
        
    
        -->
    <div class="grid-container">
      <div class="grid-item">1</div>
      <div class="grid-item">2</div>
      <div class="grid-item">3</div>
      <div class="grid-item">4</div>
      <div class="grid-item">5</div>
      <!-- <div class="grid-item">6</div>
      <div class="grid-item">7</div>
      <div class="grid-item">8</div>
      <div class="grid-item">9</div> -->
    </div>
  </body>
</html>
